<template>
  <div></div>
</template>

<script setup>
import { getBridgeData } from '@/api'
import { LineLayer, Popup } from '@antv/l7'
import { inject, onBeforeUnmount, onMounted, ref } from 'vue'
const { map, scene } = inject('mapscene')
let popup, bridgeLayer
onMounted(async () => {
  map.flyTo({
    center: [114.26, 30.5],
    zoom: 13,
    speed: 1,
    pitch: 45,
    bearing: -21,
  })
  //获取桥梁数据
  const { data } = await getBridgeData()

  //创建桥梁图层
  bridgeLayer = new LineLayer({})
    .source(data)
    .shape('arc3d')
    .size(10)
    .color('name', ['yellow', 'red', 'blue', 'green'])
    .active(true)
    .animate({
      duration: 2,
      trailLength: 1,
      interval: 0.5,
    })
  scene.addLayer(bridgeLayer)

  //创建弹框
  popup = new Popup()
  scene.addPopup(popup)
  //点击桥梁图层显示对应弹框
  bridgeLayer.on('click', e => {
    //解构数据
    const {
      feature: {
        properties: { name, info },
      },
      lngLat,
    } = e

    console.log(name, info, lngLat)
    //设置 显示内容
    popup.setLngLat(lngLat)
    popup.setHTML(`<p style="font-size:12px">${info}</p>`)
    popup.setTitle(name)
  })
})
// 组件卸载时移除图层和弹框
onBeforeUnmount(() => {
  scene.removeLayer(bridgeLayer)
  scene.removePopup(popup)
})
</script>
<style lang="scss" scoped></style>
